﻿<!DOCTYPE html>
<head>
    <title>日期控件jquery-ui-timepicker-addon</title>
    <link href="jquery-ui-1.12.1/jquery-ui.css" rel="stylesheet">
    <link href="jQuery-Timepicker-Addon/jquery-ui-timepicker-addon.css" rel="stylesheet" type="text/css"/>

    <script src="jquery/3.3.1/jquery.js" type="text/javascript"></script>
    <script src="jquery-ui-1.12.1/jquery-ui.js" type="text/javascript"></script>
    <script src="jQuery-Timepicker-Addon/jquery-ui-timepicker-addon.js" type="text/javascript"></script>
    <script src="jQuery-Timepicker-Addon/i18n/jquery-ui-timepicker-zh-CN.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            //日期
            var dayNamesMin = ["日", "一", "二", "三", "四", "五", "六"];
            var monthNamesShort = ["01月", "02月", "03月", "04月", "05月", "06月", "07月", "08月", "09月", "10月", "11月", "12月"];
            $("#time").datetimepicker({
                controlType: "select",
                dayNamesMin: dayNamesMin,
                monthNamesShort: monthNamesShort,
                changeMonth: true,
                changeYear: true,
                yearRange: "c-30:c+10",
                showSecond: true,
                dateFormat: "yy-mm-dd",
                timeFormat: "HH:mm:ss"
            });
        });
    </script>
</head>
<body>
<input id="time" type="text"/>
</body>
</html>
